Skip to main content

Panes

Panes are a DXcharts mechanism used to create individual chart sections that display separate data series.

There are two main chart-core components used to work with panes:

Pane manager​

Use the pane manager to create, remove, and manage panes. See Pane manager for the full method list.

To create a pane, use the following method:

export const createPane = (chart: Chart) => {
    return chart.paneManager.createPane();
}

You can specify an ID and options (such as display order, where 0 means highest) when creating a pane.

Pane component and data series​

After creating a pane, you can add a data series to it using the Pane component.

export const setData = (chart: Chart, points: DataSeriesPoint[], paneUUID: string) => {
    const pane = chart.paneManager.panes[paneUUID];
    // TODO fix TS error
    // @ts-ignore
    const dataSeriesModel = pane.createDataSeries();
    dataSeriesModel.setDataPoints(points);
}

By default, data is rendered as a line. To change the appearance, modify the data series type or create a Custom Drawer and register it with the drawing manager.

export const updateDataSeriesConfig = (config: DataSeriesConfig, type: DataSeriesType) => {
    config.type = type;
}

Available appearance types are defined in the DataSeriesPaintTool type.

export type DataSeriesType =
    | 'POINTS'
    | 'LINEAR'
    | 'HISTOGRAM'
    | 'TREND_HISTOGRAM'
    | 'DIFFERENCE'
    | 'TEXT'
    | 'ABOVE_CANDLE_TEXT'
    | 'BELOW_CANDLE_TEXT'
    | 'ABOVE_CANDLE_TRIANGLE'
    | 'TRIANGLE'
    | 'COLOR_CANDLE'
    | 'RECTANGULAR'
    | 'EMA_CLOUD_LINE'
    | keyof BarTypes
    | string;

Example​

This example shows panes with custom data series. One of them uses a two-dimensional array to create gaps between data sequences: